<template>
  <div class="login-container">
    <h1>管理员登录</h1>
    <el-card class="box-card">
      <div slot="header" class="login-title">
        <h2>登录</h2>
      </div>
      <div class="login-form">
        <el-form :model="aForm" status-icon :rules="rules" ref="aForm"
                 label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名字" prop="id">
            <el-input type="text" v-model="aForm.id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="aForm.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item class="info">
            <el-button type="primary" @click="submitForm('aForm')" >提交</el-button>
            <el-button @click="resetForm('aForm')">重置</el-button>
          </el-form-item>
        </el-form>

      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    data(){
      var validateId = (rule, value, callback) => {
        if (value === '' || value === undefined) {
          callback(new Error('请输入账号'));
        } else {
          callback();
        }
      };
      var validatePass = (rule, value, callback) => {
        if (value === '' || value === undefined) {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
      return {
        aForm: {
          id:'',
          password:'',
        },
        rules: {
          password: [
            {validator: validatePass, trigger: 'blur'}
          ],
          id: [
            {validator: validateId, trigger: 'blur'}
          ]
        }
      };
    },

    methods:{
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    ,
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$store.commit("updateUser", this.aForm);
          this.$http.get("http://localhost:8888/contacts/adminlogin?username=" + this.aForm.id + "&pass=" + this.aForm.password)
            .then(result => {
              if (result.status === 200) {
                if (result.body === '') {
                  this.$message({
                    type: 'error',
                    message: '用户名或密码错误!'
                  });
                } else {
                  this.$message({
                    type: 'success',
                    message: '登录成功!'
                  });

                  this.$router.push({name: "bContact"});
                }
              } else {
                this.$message({
                  type: 'success',
                  message: '用户名或密码错误!'
                });
              }

            });

        } else {
          console.log('error submit!!');
          return false;
        }
      });
     }
    },
    mounted() {
      this.$store.state.user = localStorage.getItem('user')
    }
  }
</script>

<style scoped>
  .el-card {
    height: 500px;
    position: relative;
    width: 400px;
    margin: 60px auto 0;
    padding: 0px 0px;
    background-color: #fff;
    vertical-align: middle;
    display: inline-block;

  }

</style>
